<style type="text/css">

    :focus {
        outline: none;
    }

    pre.dump {
        margin: 0;
        padding: 0;
        font-family: monospace;
    }
        
    #debugToolbar {
        z-index: 100;
        position: absolute;
        right: 0;
        top: 5em;
        padding: 0;
        width: 15em;
        overflow: hidden;
        background-color: rgb(255, 245, 168);
        background-color: rgba(255, 245, 168, 0.9);
        color: #FFC200;
        padding-top: 20px;
        padding-bottom: 20px;
        -moz-border-radius-bottomleft: 20px;
        -moz-border-radius-topleft: 20px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 1px solid #FFC200;        
    }

    #debugToolbar hr {
        margin: 0;
        padding: 0;
        border: 0;
        border-top: 1px solid #FFC200;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 2px;
        margin-top: 2px;
    }

    div#debug a, #debugToolbar a {
        text-decoration: none;
        color: #2020FF;
    }

    #debugToolbar #toolbarMenu a {
        padding-right: 15px;
        padding-top: 3px;
        padding-bottom: 3px;
        height:3em;
    }

    #debugToolbar a {
        display: block;
        margin: 0;
        padding: 0;
        padding-left: 15px;
    }

    #debugToolbar #toolbarMenu a:hover {
        background-color: #FFC200;
    }

    #debugToolbar #toolbarMenu .subtitle {
        font-size: smaller;
        text-align: right;
    }

    #debug, #debug table, #debugToolbar {
        font-family: arial, helvetica, serif;
        font-size: 12px;
    }

    div#debug {
       padding: 25px;
       margin: 0px;
       background-color: #FFF5A8;
       -moz-border-radius: 20px;
       -webkit-border-radius: 20px;
       border-radius: 20px;
       overflow: auto;
       z-index: 100;
    }

    div#debug div.Plugin {
        width: 100%;
    }

    #debug table {
        border-collapse: collapse;
        width: 100%;
    }

    #debug table td, #debug table th{
        background-color: #FFC200;
        padding: 5px;
        border-bottom: 1px solid #fff;
    }

    #debug table th {
        text-align: left;
        background-color: #7673D9;
        color: #fff;
    }

    #debug table th.statistics {
        text-align: right;
        background-color: #7673D9;
        color: #fff;
    }

    #debug table tr:nth-child(even) td {
        background-color: #FFDD73;
    }

    #debug h1, #debug h2, #debug h3, #debug h4, #debug h5, #debug h6 {
        font-family: helvetica, sans-serif;
    }

    #debug h1 {
        font-size: 1.5em;
        border-bottom: 1px solid #c0c0c0;
        margin-bottom: 3px;
    }
    #debug h2 {
        font-size: 1.3em;
        border-bottom: 1px solid #c0c0c0;
        margin-bottom: 3px;
        margin-top: 2em;
    }
    #debug h3 {
        font-size: 1.1em;
        border-bottom: 1px solid #c0c0c0;
        margin-bottom: 3px;
    }
    #debug h4, #debug h5, #debug h6 {
        font-size: 1.0em;
    }

    #debug .traceback a {
        text-decoration: none;
    }

    #debug .traceback .active {
        background-color: #DDBB73;
    }

    #debug #messages table td:nth-child(1), #debug #summaries table td:nth-child(1) {
        width: 2em;
    }

    #debug #messages table td:nth-child(2) {
        width: 7em;
    }

    #debug #messages table tr.error td {
        background-color: #f06060;
    }

    #debug #messages table tr.warning td {
        background-color: #ffff60;
    }

    #debug td.traceback {
        background-color: #FFDD73;
    }

    #debug .traceback .context {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    #debug .traceback .file {
        border-top: 1px solid #fff;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    #debug .traceback .file:first-child {
        border-top: 0;
    }

    #debug .traceback pre.row {
        margin: 0;
        padding: 0;
    }

    div#debug .menu {
        text-align: center;
    }

    div#debug .menu .item {
        width: 5em;
    }

    div#debug .menu .item .title {
        font-weight: bold;
    }

    div#debug .sql {
        color: #2020FF;
    }

    div#debug #messages label {
        margin-right: 5px;
    }

    div#debug pre {
        margin: 0;
        padding: 0;
    }

    div#debug pre .array.type, div#debug pre .object.type {
        font-weight: bold;
        font-size: medium;
    }

    div#debug pre .type {
        font-weight: normal;
        font-size: small;
    }

    div#debug pre .content {
        color: #ff0000;
    }

    div#debug pre .operator {
        color: #888a85;
    }

    div#debug pre .length, div#debug pre .modifier{
        font-style: italic;
    }
    
    div#debug .info {
        margin-bottom: 1em;
    }
</style>

<script type="text/javascript">
var Event = {
	add: function(obj,type,fn) {
		if (obj.attachEvent) {
			obj['e'+type+fn] = fn;
			obj[type+fn] = function() { obj['e'+type+fn](window.event); }
			obj.attachEvent('on'+type,obj[type+fn]);
		} else {
		    obj.addEventListener(type,fn,false);
		}
	},
	remove: function(obj,type,fn) {
		if (obj.detachEvent) {
			obj.detachEvent('on'+type,obj[type+fn]);
			obj[type+fn] = null;
		} else
		obj.removeEventListener(type,fn,false);
	},
	getTarget: function(e) {
	    return e.target || e.srcElement;
	},
        stop: function(e) {
            if (e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }

            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        }
}

var Dom = {
    hasClass: function(obj, className) {
        if (!obj.className) {
            return false;
        }
        var classes = obj.className.split(' ');
        for (var i = 0; i < classes.length; i++) {
            if (classes[i] == className) {
                return true;
            }
        }
        return false;
    },

    addClass: function(obj, className) {
        if (Dom.hasClass(obj, className) === false) {
            obj.className += ' ' + className;
        }
    },

    removeClass: function(obj, className) {
        if (!obj.className) {
            return;
        }
        var classes = obj.className.split(' ');
        var newClasses = [];
        for (var i = 0; i < classes.length; i++) {
            if (classes[i] != className) {
                newClasses[newClasses.length] = classes[i];
            }
        }
        obj.className = newClasses.join(' ');
    },
    
    toggle: function(element, cssDisplay) {
        if (typeof(element) == 'string') {
            element = document.getElementById(element);
        }
        if (!element) {
            return false;
        }
        element.style.display = element.style.display != 'none' ? 'none' : (cssDisplay ? cssDisplay : 'block');
        return element.style.display != 'none';
    },
    
    toggleCollection: function(element, collection, cssDisplay) {
        for (var i = 0; i < collection.length; i++) {
            if (collection[i] != element) {
                var el = collection[i];
                if (typeof(collection[i]) == 'string') {
                    el = document.getElementById(collection[i]);
                }
                if (!el) {
                    continue;
                }
                el.style.display = 'none';
            }
        }
        return Dom.toggle(element, cssDisplay);
    }
}

function toggleDebugItem(id, menuIds) {
    var d = null;
    if (typeof(menuIds) == 'object' && (menuIds instanceof Array)) {
        d = Dom.toggleCollection(id, menuIds) ? 'block' : 'none';
    } else {
        d = Dom.toggle(id) ? 'block' : 'none';
    }
    document.getElementById('debug').style.display = d;
    if (id != null) {
        toggledMenuId = id;
    }
}

var menuIds = [];
var toggledMenuId = null;

</script>
    <div id="debug">
        <h1>Debug</h1>
        <table class="menu" id="debugmenu">
            <tr>
        <?php
            $ids = array();
            foreach ($data->get('plugins', '/', array()) as $plugin):
                $id = uniqid();
                $ids[] = $id;
        ?>
            <td class="item">
                <a href="#<?php echo $id; ?>" id="link<?php echo $id; ?>"><span class="title"><?php echo $plugin->getTitle(); ?></span><span class="subtitle"><?php echo ($plugin->getSubtitle() === null ? '' : '<br/>(' . str_replace(' ', '&nbsp;', $plugin->getSubtitle()) . ')'); ?></span></a>
                <script type="text/javascript">
                    Event.add(document.getElementById('link<?php echo $id; ?>'), 'click', function(e) {
                        Dom.toggle('<?php echo $id; ?>', menuIds);
                        Event.stop(e);
                    });
                </script>
            </td>
        <?php endforeach; ?>
            <td></td>
            </tr>
        </table>
        <script type="text/javascript">
            menuIds = ["<?php echo implode('","', $ids); ?>"];
        </script>
        <?php foreach ($data->get('plugins', '/', array()) as $index=>$plugin): ?>
        <?php $id = $ids[$index]; ?>
        <div class="<?php echo str_replace('\\', ' ', get_class($plugin)); ?>" id="<?php echo $id; ?>">
            <?php echo $plugin->render(); ?>
        </div>
        <script type="text/javascript">
            document.getElementById('<?php echo $id; ?>').style.display = 'none';
        </script>
        <?php endforeach; ?>
    </div>
    <script type="text/javascript">
        document.getElementById('debugmenu').style.display = 'none';
        var debugEl = document.getElementById('debug');
        debugEl.style.display = 'none';
        debugEl.style.position = 'absolute';
        debugEl.style.top = 0;
        debugEl.style.left = 0;
        debugEl.style.right = 0;
        debugEl.style.marginLeft = '1em';
        debugEl.style.marginRight = '16em';
        debugEl.style.marginTop = '1em';
        debugEl.style.zIndex = 100;
        document.write('<div id="debugToolbar">');
        document.write('<a href="#" onclick="if (Dom.toggle(\'toolbarMenu\', null, \'inline\')) {this.innerHTML = this.innerHTML.replace(String.fromCharCode(9654), String.fromCharCode(9660)); toggleDebugItem(toggledMenuId, menuIds);} else {this.innerHTML = this.innerHTML.replace(String.fromCharCode(9660), String.fromCharCode(9654)); toggleDebugItem(null, menuIds);  document.getElementById(\'debug\').style.display = \'none\';} return false;">Debug&nbsp;&#x25BC;</a>');
        document.write('<span id="toolbarMenu">');
        <?php foreach ($data->get('plugins', '/', array()) as $index=>$plugin): ?>
            document.write('<hr/><a href="#" onclick="toggleDebugItem(\'<?php echo $ids[$index]; ?>\', menuIds); return false;"><?php echo $plugin->getTitle(); ?><?php echo $plugin->getSubtitle() === null ? '' : '<div class="subtitle">' . $plugin->getSubtitle() . '</div>'; ?></a>');
        <?php endforeach; ?>
        document.write('</span>');
        document.write('</div>');
    </script>

    <script type="text/javascript">
        var preElements = document.getElementsByTagName('pre');
        for (var i = 0; i < preElements.length; i++) {
            if (Dom.hasClass(preElements[i], 'vardump')) {
                var spanElements = preElements[i].getElementsByTagName('span');
                for (var j = 0; j < spanElements.length; j++) {
                    if (Dom.hasClass(spanElements[j], 'type') && Dom.hasClass(spanElements[j], 'array')) {
                        var content = spanElements[j].innerHTML;
                        while (spanElements[j].firstChild) {
                            spanElements[j].removeChild(spanElements[j].firstChild);
                        }
                        var link = spanElements[j].appendChild(document.createElement('a'));
                        link.innerHTML = content;
                        link.setAttribute('href', '#');
                        Event.add(link, 'click', function(e) {
                            var parent = Event.getTarget(e).parentNode;
                            while (!Dom.hasClass(parent, 'items')) {
                                parent = parent.nextSibling;
                            }
                            parent.style.display = parent.style.display == 'none' ? 'inline' : 'none';
                        });
                    } else if (Dom.hasClass(spanElements[j], 'items')) {
                        spanElements[j].style.display = 'none';
                    }
                }
            }
        }
    </script>